<template>
    <div>
        <el-table :data="invoiceCloudTable" size="small" class="table" height="80%" :cell-style="cellStyle"
            :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
            style="width:100%; border:1px solid #d6cfe2;">
            <el-table-column prop="indexs" show-overflow-tooltip align="center" width="60" label="序号">
            </el-table-column>
            <el-table-column prop="testname" show-overflow-tooltip align="left" label="发票云">
            </el-table-column>
            <el-table-column prop="remarks" show-overflow-tooltip align="center" width="70" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="test(scope.row)" :disabled="!scope.row.indexs">
                        {{scope.row.remarks}}
                        <span v-if="scope.row.show">
                            <i class="el-icon-circle-check" style="color:#67C23A"></i>
                        </span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 账户查询整列 -->
		<!-- 可经办业务模式查询 参数弹出框 -->
		<el-dialog title="单张发票真伪查验" :visible.sync="invoiceAuthenticityDialog" width="50%">
			<el-form :model="invoiceAuthenticityForm" size="small" label-width="140px" ref="invoiceAuthenticityForms"
				v-loading="invoiceAuthenticityLoading">
				<el-row :gutter="15">
					<el-col :span="12">
						<el-form-item label="发票类型" prop="type"
							:rules="[ {required: true, message:'发票类型不能为空', trigger:'blur'} ]">
							<el-select v-model="invoiceAuthenticityForm.type" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in invoiceType" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="开票日期" prop="invoiceDate"
							:rules="[ {required: true, message:'开票日期不能为空', trigger:'blur'} ]">
							<el-date-picker prefix-icon="el-icon-folder" v-model="invoiceAuthenticityForm.invoiceDate"
								type="date" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
								placeholder="请选择">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票代码" prop="invoiceCode"
							:rules="[ {required: true, message:'发票代码不能为空', trigger:'blur'} ]">
							<el-input v-model="invoiceAuthenticityForm.invoiceCode" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票号码" prop="invoiceNo"
							:rules="[ {required: true, message:'发票号码不能为空', trigger:'blur'} ]">
							<el-input v-model="invoiceAuthenticityForm.invoiceNo" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="invoiceAuthenticityForm.type=='0'">
						<el-form-item label="不含税金额" prop="totalAmount">
							<el-input v-model="invoiceAuthenticityForm.totalAmount" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="invoiceAuthenticityForm.type=='1'">
						<el-form-item label="不含税金额" prop="totalAmount"
							:rules="[ {required: true, message:'不含税金额不能为空', trigger:'blur'} ]">
							<el-input v-model="invoiceAuthenticityForm.totalAmount" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="invoiceAuthenticityForm.type=='0'">
						<el-form-item label="校验码" prop="checkCode"
							:rules="[ {required: true, message:'校验码不能为空', trigger:'blur'} ]">
							<el-input v-model="invoiceAuthenticityForm.checkCode" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="invoiceAuthenticityForm.type=='1'">
						<el-form-item label="校验码" prop="checkCode">
							<el-input v-model="invoiceAuthenticityForm.checkCode" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="子公司税号" prop="subsidiaryTaxNo">
							<el-input v-model="invoiceAuthenticityForm.subsidiaryTaxNo" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="closeInvoiceAuthenticityOne" plain>关闭</el-button>
				<el-button size="small" type="primary" @click="invoiceAuthenticityOne" plain>测试</el-button>
			</span>
		</el-dialog>
		<el-dialog title="票据OCR识别" :visible.sync="billOCRDialog" width="50%">
			<el-form :model="billOCRForm" size="small" label-width="140px" ref="billOCRFormForms"
				v-loading="billOCRLoading">
				<el-row :gutter="15">
					<el-col :span="24">
						<el-form-item label="图片" prop="image" :rules="[ {required: true, message:'图片不能为空', trigger:'blur'} ]" >
							<el-upload ref="image" list-type="picture-card"
								:action="`${this.$http.BASE_URL}/zh/test/uploadInvoice`"
								:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
								$alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
								dangerouslyUseHTMLString: true,
								showConfirmButton: false,
								closeOnClickModal: true,
								customClass: 'showPic'
							});}" 
							:on-success="(response, file, fileList) => {
							billOCRForm.image = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
						}" :on-remove="(file, fileList) => {
							$http.post(`/dlyrlTest/deleteFile?path=${(file.response && file.response.url) || file.url}`).then(({data}) => {
							$message.success(data.msg)
						})
							billOCRForm.image = fileList.map(item => item.url).join('|')
						}" :before-remove="(file, fileList) => {
							return $confirm(`确定移除 ${file.name}？`)
						}" multiple :limit="1" :on-exceed="(files, fileList) =>{
							$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
						}" :file-list="imageArra">
								<i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="closeBillOCRFormOne" plain>关闭</el-button>
				<el-button size="small" type="primary" @click="billOCRFormOne" plain>测试</el-button>
			</span>
		</el-dialog>
		<el-dialog title="票据多图OCR识别" :visible.sync="paperPhotosOCRDialog" width="50%">
			<el-form :model="paperPhotosOCRForm" size="small" label-width="140px" ref="paperPhotosOCRForms"
				v-loading="paperPhotosOCRLoading">
				<el-row :gutter="15">
					<el-col :span="24">
						<el-form-item label="附件" prop="image"
						    :rules="[{required: true, message:'附件不能为空', trigger:'blur'}]">
						          <!-- :on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}"   :on-preview="(file) => {document.location.href = file.url}"-->
						      <el-upload ref="image"
						        
						        :action="`${this.$http.BASE_URL}/zh/test/uploadInvoice`"
						        :headers="{token: $cookie.get('token')}"                    
						        :on-preview="(file) => {$window.open ((file.response && file.response.url) || file.url,'_blank') }"
						        :on-success="(response, file, fileList) => {
						           paperPhotosOCRForm.image = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
						        }"
						        :on-remove="(file, fileList) => {
						          $http.post(`/dlyrlTest/deleteFile?path=${(file.response && file.response.url) || file.url}`).then(({data}) => {
						            $message.success(data.msg)
						          })
						          paperPhotosOCRForm.image = fileList.map(item => item.url).join('|')
						        }"
						        :before-remove="(file, fileList) => {
						          return $confirm(`确定移除 ${file.name}？`)
						        }"
						        multiple
						        :limit="1"
						        :on-exceed="(files, fileList) =>{
						          $message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
						        }"
						        :file-list="imageArrays">
						        <el-button size="small" type="primary">点击上传</el-button>
						        <div slot="tip" class="el-upload__tip">添加相关附件</div>
						      </el-upload>
						  </el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="closePaperPhotosOCR" plain>关闭</el-button>
				<el-button size="small" type="primary" @click="paperPhotosOCR" plain>测试</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import tableStyles from '../../../../utils/mixins.js';
export default{
    mixins: [tableStyles],
    data() {
        return{
            invoiceCloudTable: [{
                    indexs: '1',
                    testname: '单张发票真伪查验',
                    remarks: '测试',
                    show: false
                },
                {
                    indexs: '2',
                    testname: '票据OCR识别',
                    remarks: '测试',
                    show: false
                },
                {
                    indexs: '3',
                    testname: '票据多图OCR识别',
                    remarks: '测试',
                    show: false
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                // {indexs:'7',testname:'收支申报信息查询',remarks:'测试',show:false},
                // {indexs:'8',testname:'可用收支申报附言信息查询',remarks:'测试',show:false},
                // {indexs:'9',testname:'收支申报检查',remarks:'测试',show:false},
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
                {
                    indexs: '',
                    testname: '-',
                    remarks: '测试'
                },
            ],
            // 单张发表查验真伪
            invoiceAuthenticityDialog: false, //参数弹出框
			invoiceType:[{label:"普票",value:"0"},{label:"专票",value:"1"}],
            invoiceAuthenticityForm: {
                type:"", //发票类型 0：普票 1：专票 必填
                invoiceCode:"",  //发票代码 必填 
                invoiceNo:"",   //发票号码 必填
                invoiceDate:"", //开票日期 必填
                financingFlag:"N",   //融资标识 必填
                totalAmount:"", //不含税金额  专票必填
                checkCode:"",   //校验码  普票必填
                subsidiaryTaxNo:"",  // 子公司税号
            },
            invoiceAuthenticityLoading: '',
            invoiceAuthenticityShow: false,
			
			//票据OCR识别
			billOCRDialog: false, //参数弹出框
			visible: false,
			imageArra:[],
			billOCRForm: {
			    image:"", //图片路径
			    returnImage:"N", //返回校正图片 默认N
			},
			billOCRLoading: '',
			billOCRShow: false,
			
			//票据多图OCR识别
			paperPhotosOCRDialog: false, //参数弹出框
			visible: false,
			imageArrays:[],
			paperPhotosOCRForm: {
			    image:"", //图片路径
			    returnImage:"N", //返回校正图片 默认N
			},
			paperPhotosOCRLoading: '',
			paperPhotosOCRShow: false,
        }
    },
    methods:{
        test(row) {
            if (row.testname == '单张发票真伪查验') {
                this.invoiceAuthenticityDialog = true;
            } else if (row.testname == '票据OCR识别') {
                this.billOCRDialog=true;
            } else if (row.testname == '票据多图OCR识别') {
                this.paperPhotosOCRDialog=true;
            }
        },
        invoiceAuthenticityOne() {
            this.$refs['invoiceAuthenticityForms'].validate((valid) => {
                if (valid) {
                    this.invoiceAuthenticityLoading = true;
                    this.$http({
                        url: '/zh/saastest/CHKCHK01',
                        method: 'post',
                        params: {
                            company: this.$store.state.user.companyId,
							...this.invoiceAuthenticityForm
                        }
                    }).then(({
                        data
                    }) => {
                        if (data) {
                            this.invoiceAuthenticityLoading = false;
                            if (data.success) {
                                this.closeInvoiceAuthenticityOne();
                                this.$message.success(data.msg);
                                this.invoiceCloudTable[0].show = true;
                            }
                        }
                    })
                }
            })
        },
        closeInvoiceAuthenticityOne() {
            this.invoiceAuthenticityDialog = false;
            this.$refs.invoiceAuthenticityForms.resetFields();
        },
		
		billOCRFormOne() {
		    this.$refs['billOCRFormForms'].validate((valid) => {
		        if (valid) {
					console.log(this.imageArra);
		            this.billOCRLoading = true;
		            this.$http({
		                url: '/zh/saastest/CHKOCR01',
		                method: 'post',
		                params: {
		                    company: this.$store.state.user.companyId,
							...this.billOCRForm
		                }
		            }).then(({
		                data
		            }) => {
		                if (data) {
		                    this.billOCRDialog = false;
		                    if (data.success) {
		                        this.closeBillOCRFormOne();
		                        this.$message.success(data.msg);
		                        this.invoiceCloudTable[1].show = true;
		                    }
		                }
		            })
		        }
		    })
		},
		closeBillOCRFormOne() {
		    this.paperPhotosOCRDialog = false;
		    this.$refs.billOCRFormForms.resetFields();
		},
		
		paperPhotosOCR() {
		    this.$refs['paperPhotosOCRForms'].validate((valid) => {
		        if (valid) {
					console.log(this.imageArra);
		            this.billOCRLoading = true;
		            this.$http({
		                url: '/zh/saastest/CHKOCR02',
		                method: 'post',
		                params: {
		                    company: this.$store.state.user.companyId,
							...this.paperPhotosOCRForm
		                }
		            }).then(({
		                data
		            }) => {
		                if (data) {
		                    this.billOCRDialog = false;
		                    if (data.success) {
		                        this.closePaperPhotosOCR();
		                        this.$message.success(data.msg);
		                        this.invoiceCloudTable[2].show = true;
		                    }
		                }
		            })
		        }
		    })
		},
		closePaperPhotosOCR() {
		    this.paperPhotosOCRDialog = false;
		    this.$refs.paperPhotosOCRForms.resetFields();
		},
    }
}
</script>
<style scoped>

</style>
